Skip to content

v6: Make the font-size setting reach the doc explorer, headers, and pills#4422

Merged
trevor-scheer merged 2 commits into
graphiql-6from
trevor/font-size-token-migration
Jul 13, 2026
Merged

v6: Make the font-size setting reach the doc explorer, headers, and pills#4422
trevor-scheer merged 2 commits into
graphiql-6from
trevor/font-size-token-migration

Conversation

@trevor-scheer

@trevor-scheer trevor-scheer commented Jul 13, 2026

Copy link
Copy Markdown
Contributor

Summary

  • The doc-explorer's field-card, type-card, and fields-list all hardcoded font-size in px (11.5px, 14px, 10px, 9px, and more), so none of that text grew or shrank with the font-size preset. They now read --font-size-mono, --font-size-small, or --font-size-eyebrow depending on which is closest to the original size.
  • response-header, panel-header, and method-pill had the same problem: fixed px values that ignored Settings > Font size entirely. Migrated to the matching tokens.
  • The legacy --font-size-hint token (root.css) was a frozen value that never scaled with the preset, at ~19 call sites across var-headers-strip, the collections plugin, the history plugin, and the doc-explorer plugin. Every usage now points at --font-size-eyebrow instead, and the dead --font-size-hint definition is gone.
  • Along the way, found that --font-size-body itself is silently shadowed by a frozen legacy value in root.css (same class of bug, but out of scope here, so flagged separately). Avoided that token in the new mappings and used --font-size-mono for the mono-family names/types instead, since it actually rescales.

Test plan

  • Open Settings, set Font Size to Large or Extra Large, then open the Documentation Explorer. Confirm type names, field names/types, descriptions, and the "FIELDS · N" section label all grow with it (they previously stayed fixed).
  • Run a query and confirm the response header (status code, timing, size) grows with the font-size setting.
  • Confirm panel headers (e.g. the "History" and "Documentation Explorer" panel titles) grow with the setting.
  • Confirm method pills (QRY/MUT/SUB badges) grow with the setting.
  • Set the font size back to Default and confirm everything returns to its original size with nothing shifted or clipped.
  • Check both Dark and Light themes at a couple of font-size presets to confirm nothing overlaps or truncates awkwardly at the larger sizes.

Refs: #4228

`--font-size-hint` in `root.css` was a frozen v5 value that never
scaled with the font-size preset. All ~19 call sites (var-headers-strip,
collections, history, doc-explorer) are caption/label text, so they
now use `--font-size-eyebrow` and track Settings > Font size. The
dead `--font-size-hint` definition is removed since nothing references
it anymore.
…header, panel-header, method-pill

`field-card`, `type-card`, `fields-list`, `response-header`,
`panel-header`, and `method-pill` all hardcoded `font-size` in px,
so they silently ignored the Settings font-size preset. Swapped each
for the nearest `--font-size-*` token (verified against the resolved
`--font-size-body` alias, which turned out to be shadowed by a frozen
legacy value in `root.css` — used `--font-size-mono` instead for the
mono-family names/types so they actually track the preset).
@changeset-bot

changeset-bot Bot commented Jul 13, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 985022d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@trevor-scheer
trevor-scheer marked this pull request as ready for review July 13, 2026 02:46
@trevor-scheer
trevor-scheer merged commit 8a2577f into graphiql-6 Jul 13, 2026
13 checks passed
@trevor-scheer
trevor-scheer deleted the trevor/font-size-token-migration branch July 13, 2026 02:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant